<template>
    <div class="serchCont">
        <div class="serchInput" :style="'border: 1px solid '+color">
          <input v-model="serchKey" @keydown="keyDownFn($event)" :placeholder="placher" />
          <div @click="serchFn" :style="'color:'+color" class="serchBtn iconfont icon-icon-test"></div>
        </div>
    </div>
  </template>
  
  <script>
  import bus from '@/assets/evnetBus.js'
    export default {
      components: {},
      data() {
        return {
          serchKey:'',
        }
      },
      props: {
        color:{},
        placher:String,
        url:String,
        disBack:Boolean,
      },
      methods:{
        keyDownFn(e){
          if(e.keyCode==13){
            document.activeElement.blur()
            this.serchFn()
          }
        },
        focusFn(){
          this.$emit('focus')
        },
        serchFn(){
          this.$emit('serchClick',this.serchKey)
        },
        backfn(){
            this.$router.push({path:'/user'})
        },
      },
      mounted(){
        bus.$on('getSerchVal',(data)=>{
          this.serchKey = data
        })
      },
      created() {
        this.$watch('serchKey',(newVal,oldVal)=>{
          if(newVal==''&&oldVal!=''){
            this.serchFn()
          }
        })
      },
    }
  </script>
  
  <style scoped lang="less">
  .serchCont{
      width: 100%;
      background-color: #fff;
      padding: 0.75rem 4%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .backBtn{
        margin-right: 0.25rem;
        font-size: 1rem;
        padding: 0 0.25rem;
      }
      .serchInput{
          flex: 1;
          width: 0.5rem;
          background-color: #fff;
          // margin-right: 0.6rem;
          padding: 0 0.25rem 0 0.75rem;
          color: #777;
          border-radius: 1rem;
          box-sizing: border-box;
          height: 1.8rem;
          line-height: 1.8rem;
          // white-space: nowrap;
          // overflow: hidden;
          font-size: 0.65rem;
          // text-overflow: ellipsis;
          display: flex;
          align-items: center;
          border: 1px solid black;
          input{
            border: none;
            outline: none;
            padding:0;
            width: 100%;
            height: 1.8rem;
            line-height: 1.8rem;
            background: none;
            font-size: 0.6rem;
          }
          .serchBtn{
            width: 1.8rem;
            height: 1.8rem;
            font-size: 1.2rem;
            text-align: center;
            line-height: 1.8rem;
            border-radius: 50%;
            // color: white;
          }
        }
    }
  </style>
  